<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOOK-Hi~</title>

    <link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon"/>

    <!-- easyui 引入所需的 css -->
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">    <!-- 皮肤 -->
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">

    <link rel="stylesheet" type="text/css" href="wu/css/icon.css">

    <!-- 引入所需的 js，注意先后顺序 -->
    <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui/easyui-lang-zh_CN.js"></script>

    <!-- 判断是否在线 -->
    <script type="text/javascript" src="js/is-online.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        form {
            width: 800px;
            height: 75px;
            min-width: 800px;
            /*控制位置*/
            position: absolute; left: 0; right: 0; top: 10%; margin: auto;
            padding: 30px;
            background-color: white;
            border: 2px solid rgba(128, 128, 128, 0.2);
            border-radius: 10px;
        }

    </style>
</head>

<body style="background-image:url(images/login.jpg)">

<div>

<div style="width:85px;height:55px;border:1px solid #ccc;
            position: absolute; right:0; top: 5%; margin: auto;
            padding: 10px;
            background-color: white;border-radius: 10px;">
    <a href="/login" class="easyui-linkbutton" data-options="iconCls:'icon-user-go'" style="width:65px">登录</a>
</div>

<!--    查询-->
<form id="accIndexBookStock_query_form">
    书名： <input class="easyui-textbox" id="accIndexBookStock_query_form_name" name="name" style="width:140px" />
    类型： <input id="accIndexBookStock_query_form_type_id" name="type_id" style="width:140px" />
    作者： <input id="accIndexBookStock_query_form_author_id" name="author_id" style="width:140px" />
    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:65px"
       onclick='accIndexBookStockQuery();'>查询</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" style="width:65px"
       onclick='accIndexBookStockQueryClear();'>重置</a>
</form>


<div style="width:800px;height:600px;min-width: 800px;border:1px solid #ccc;
            position: absolute; left: 0; right:0; top: 20%; margin: auto;
            padding: 10px;
            background-color: white;border-radius: 10px;">
    <!--    库存列表-->
    <table id="accIndexBookStock_bookStock_grid"></table>
</div>

</div>

</body>

<script type="text/javascript">

    $(function () {
        initIndexBookStockComponents();
        initIndexBookStockGrid();
    });

    function initIndexBookStockComponents() {
        $("#accIndexBookStock_query_form_type_id").combogrid({
            url: '/queryBookTypes',
            idField: 'id', textField: 'name',
            panelWidth: 160, panelHeight: 200,
            editable: true, mode: 'remote',
            columns: [
                [
                    {field: 'id', title: '编号', width: 50},
                    {field: 'name', title: '类型', width: 100}
                ]
            ],
            loadFilter: function (data) {
                if (data.data) return data.data;
                else return data;
            },
            onClickRow: function (value, row, index) {}
        });

        $("#accIndexBookStock_query_form_author_id").combogrid({
            url: '/queryBookAuthors',
            idField: 'id', textField: 'name',
            panelWidth: 210, panelHeight: 200,
            editable: true, mode: 'remote',
            columns: [
                [
                    {field: 'id', title: '编号', width: 50},
                    {field: 'name', title: '姓名', width: 100},
                    {field: 'sex', title: '性别', width: 50,
                        formatter: function (value, row, index) {
                            if (value === 0) {
                                return '女';
                            } else if (value === 1) {
                                return '男';
                            } else {
                                return '';
                            }
                        }
                    }
                ]
            ],
            loadFilter: function (data) {
                if (data.data) return data.data;
                else return data;
            },
            onClickRow: function (value, row, index) {}
        });
    }

    function initIndexBookStockGrid() {
        $('#accIndexBookStock_bookStock_grid').datagrid({
            url: '/queryAllBookStocks',
            idField: 'id',
            // fitColumns: true,
            fit: true, scrollbarSize: 0, striped: true,
            checkOnSelect: false, selectOnCheck: false, singleSelect: true,
            pagination: true, pageSize: 15, pageList : [15, 30, 60 ], rownumbers: true,
            columns: [
                [
                    {field: 'book_name', title: '书名', width: 250, align: 'center', halign: 'center'},
                    {field: 'book_type_name', title: '类型', width: 200, align: 'center', halign: 'center'},
                    {field: 'book_author_name', title: '作者', width: 190, align: 'center', halign: 'center'},
                    {field: 'num', title: '库存', width: 100, align: 'center', halign: 'center'}
                ]
            ],
            loadFilter: function (data) {
                if (data.data) return data.data;
                else return data;
            },
            onLoadSuccess: function (node, data) {},
            onClickRow: function (index, row) {}
        });
    }

    function accIndexBookStockQuery() {
        $("#accIndexBookStock_bookStock_grid").datagrid('load', {
            name:$('#accIndexBookStock_query_form_name').val(),
            type_id:$('#accIndexBookStock_query_form_type_id').val(),
            author_id:$('#accIndexBookStock_query_form_author_id').val()
        });
    }

    function accIndexBookStockQueryClear() {
        $('#accIndexBookStock_query_form_name').textbox('clear');
        $('#accIndexBookStock_query_form_type_id').combogrid('clear');
        $('#accIndexBookStock_query_form_author_id').combogrid('clear');
        $("#accIndexBookStock_bookStock_grid").datagrid('load', {
            name: null,
            type_id: null,
            author_id: null,
        });
    }

</script>
</html>